<template>
  <div class="implementation-feedback-container">
    <el-card shadow="never">
      <template #header>
        <span>客户反馈管理</span>
      </template>

      <!-- 统计卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="总反馈数" :value="56" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="待处理" :value="8">
              <template #prefix>
                <el-icon style="color: #E6A23C"><Warning /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="处理中" :value="12" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="已完成" :value="36" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 反馈列表 -->
      <el-table :data="feedbackList" border stripe>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="project" label="项目名称" width="180" />
        <el-table-column prop="customer" label="客户名称" width="120" />
        <el-table-column prop="type" label="反馈类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.type === 'problem' ? 'danger' : row.type === 'suggestion' ? 'warning' : 'success'">
              {{ row.type === 'problem' ? '问题' : row.type === 'suggestion' ? '建议' : '表扬' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="反馈内容" min-width="250" show-overflow-tooltip />
        <el-table-column prop="status" label="处理状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === 'pending' ? 'warning' : row.status === 'processing' ? 'primary' : 'success'">
              {{ row.status === 'pending' ? '待处理' : row.status === 'processing' ? '处理中' : '已完成' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="handler" label="处理人" width="100" />
        <el-table-column prop="createTime" label="反馈时间" width="180" />
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" link @click="handleProcess(row)">
              处理
            </el-button>
            <el-button type="success" size="small" link @click="handleReply(row)">
              回复
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Warning } from '@element-plus/icons-vue'

const feedbackList = ref([
  {
    id: 1,
    project: 'XX集团ERP实施项目',
    customer: 'XX集团',
    type: 'problem',
    content: '系统登录速度较慢，希望优化',
    status: 'pending',
    handler: '张伟',
    createTime: '2024-10-16 10:30:00'
  },
  {
    id: 2,
    project: 'YY公司财务系统上线',
    customer: 'YY公司',
    type: 'suggestion',
    content: '建议增加报表导出功能',
    status: 'processing',
    handler: '李娜',
    createTime: '2024-10-15 14:20:00'
  },
  {
    id: 3,
    project: 'ZZ制造业ERP项目',
    customer: 'ZZ制造',
    type: 'praise',
    content: '实施团队非常专业，服务态度好',
    status: 'completed',
    handler: '王强',
    createTime: '2024-10-14 09:00:00'
  }
])

const handleProcess = (row) => {
  ElMessage.info('处理反馈：' + row.content)
}

const handleReply = (row) => {
  ElMessage.info('回复客户')
}
</script>

<style scoped>
.implementation-feedback-container {
  padding: 20px;
}
</style>

